<!--注册页-->
<template>
  <div style="height: 100vh;background-color:#fff;overflow: hidden">
    <el-container>
      <el-header style="height: 8vh;padding-top: 10px">
        <el-row :gutter="10">
          <el-col :span="6">
          </el-col>
          <el-col :span="10" style="position: relative">
            <img src="/logo/logo.png" style="height: 50px;position: absolute;float: left;display: block">
            <span style="color: #3398eb;font-weight: bold;position: absolute;float: left;font-size: 30px;display: block;margin-left: 90px">智游天下</span>
          </el-col>
          <el-col :span="8">
            <el-button type="text" plain style="font-size: 25px;margin-top: 10px" @click="router.push('/')"><el-icon><HomeFilled /></el-icon>首页</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="container">
        <div style="width: 60vh;height: 50vh;background-color: #f8fafd;margin: 0 auto;padding-top: 30px">
          <el-form label-position="top" label-width="80px" style="width: 400px;margin: 0 auto">
            <el-form-item label="用户名">
              <el-input placeholder="请输入用户名" v-model="registerUser.username"/>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group style="background-color: #fff" v-model="registerUser.userGender">
                <el-radio border label="男" value="1" style="margin: 0"></el-radio>
                <el-radio border label="女" value="0"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker type="date" format="YYYY-MM-DD" v-model="registerUser.userBirthday"
                              value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input placeholder="请输入手机号" v-model="registerUser.userPhone"/>
            </el-form-item>
            <el-form-item label="密码">
              <el-input placeholder="请输入密码" show-password v-model="registerUser.password"/>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 50%;margin: 0 auto" type="primary" @click="register">立即注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
      <el-footer style="display: flex;flex-wrap: wrap;padding: 70px 100px;justify-content: space-evenly;">
        <TravelAgentView />
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import TravelAgentView from "@/views/TravelAgentView.vue";
import router from "@/router";
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//定义对象用来保存注册用户信息
const registerUser = ref({
  username: '',
  userGender:'',
  userBirthday: '',
  userPhone: '',
  password: ''
})

//定义方法注册用户
const register = ()=>{
  const username = registerUser.value.username
  axios.get(BASE_URL+'/v1/user/select/'+username)
      .then((response)=>{
        if(response.data.code === 2000){
            let data = qs.stringify(registerUser.value)
            axios.post(BASE_URL+'/v1/user/register',data)
                .then((response)=>{
                  if(response.data.code === 2000){
                    ElMessage.success('注册成功!');
                    router.push('/login')
                  }else{
                    ElMessage.error(response.data.msg);
                  }
                })
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

</script>

<style scoped>
.container {
  background-image: url('../../public/imgs/login5.jpg'); /* 图片路径 */
  background-size: cover; /* 背景图片大小调整方式 */
  background-position: center center; /* 背景图片位置 */
  background-repeat: no-repeat; /* 背景图片是否重复 */
  height: 60vh; /* 设置高度 */
}
</style>